<template>
  <div style="height:500px;width:1050px;position: relative;z-index:0">
    <div id="container" class="map" :class="{mapclass: isall}"></div>
    <div :class="{mapbkg: isbkg}" style="height:836px;width:100%;top:0;position:absolute;z-index:2" v-if="isbkg"></div>
    <!-- <div class="mapbutton" :style="{top:btntop,right:btnright}" @click="setStyle">{{btntext}}</div> -->
  </div>
</template>

<script>
/* eslint-disable */
// import imgs from '../../../assets/images/pic--school.png'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'tw-map',
  props: {
    zoom: {
      type: String,
      default: '11'
    },
    areaId: {
      type: String,
      default: '131000'
    }
  },
  data () {
    return {
      subDistrictList: [],
      isbkg: false,
      zIndex: 1,
      isall: false,
      btntop: '0px',
      btntext: '放大',
      btnright: '0px',
      allCityData: [{
        areaid: '131002',
        lnglat: [116.75994873046875, 39.302794408952365],
        name: '安次区',
        prism: null,
        num: 0
      }],
      amap: null,
      curAreaId: '',
      mapAllData: {
        '廊坊市': {
          areaid: '131000',
          mapjson: null,
          lnglat: [],
          data: [],
          num: 0
        }
      }
    }
  },

  created () {
    window.aaa = this
    this.curAreaId = this.areaId
  },
  mounted () {
    this.getSchoolNum()
  },
  beforeDestroy () {
    let vm = this
    if (vm.amap) {
      vm.amap.destroy()
      vm.amap = null
    }
  },
  methods: {
    setStyle () {
      let vm = this
      if (vm.isall) {
        vm.zIndex = 1
        vm.isall = false
        vm.btntop = '0px'
        vm.btnright = '0px'
        vm.btntext = '放大'
        vm.$emit('showall', true)
        // vm.amap.setZoomAndCenter(9.8, [116.63635253906249, 38.89958342598271])
        // vm.amap.setZoomAndCenter(11, [116.63635253906249, 38.89958342598271])
        // this.initMap()
      } else {
        vm.zIndex = 1
        vm.isall = true
        if (vm.zoom === '11') {
          vm.btntop = '-120px'
          vm.btnright = '-1200px'
        } else {
          vm.btntop = '-120px'
          vm.btnright = '-900px'
        }
        vm.btntext = '恢复'
        vm.$emit('showall', false)
        // vm.amap.setZoomAndCenter(11, [116.63635253906249, 38.89958342598271])
      }
    },
    getSchoolNum () {
      let vm = this
      // for(let key  in vm.mapAllData){
      //   vm.mapAllData[key].num = Math.floor((Math.random()*100)+1)
      // }
      vm.initMap()
    },
    initMap () {
      let vm = this
      let zoom = parseFloat(vm.zoom)
      vm.isbkg = true

      AMapLoader.load({
        'key': '4daa78d371fcbec403897e8ccc0c408c',   // 申请好的Web端开发者Key，首次调用 load 时必填
        'version': '1.4.15',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        'plugins': ['Map3D','ElasticMarker','AMap.DistrictSearch','AMap.ControlBar','AMap.Heatmap'],  // 插件列表
        'AMapUI': {             // 是否加载 AMapUI，缺省不加载
          'version': '1.1',   // AMapUI 缺省 1.1
          'plugins':[],       // 需要加载的 AMapUI ui插件
        },
        'Loca':{                // 是否加载 Loca， 缺省不加载
          'version': '1.3.2'  // Loca 版本，缺省 1.3.2
        }
      }).then((AMap)=>{
      vm.amap = new AMap.Map('container', {
        viewMode: '3D',
        mapStyle: 'amap://styles/ed3949fcc58f08e9e8b692f949c6137d',
        pitch: 50,
        features: ['bg', 'road'],
        zoom: 9.8,
        center: [116.45635253906249, 38.85958342598271],
        resizeEnable: true,
        skyColor: '#031532' // '#05388f'
      })
      let map = vm.amap

      let controlBar = new AMap.ControlBar({
        position: {top: '10px', left: '-40px'},
        showZoomBar: true,
        showControlButton: false
      })
      map.addControl(controlBar)

      let buildlayers = new AMap.Buildings({
        zooms: [13, 18],
        zIndex: 10,
        heightFactor: 2 // 2倍于默认高度，3D下有效
      })
      vm.amap.add(buildlayers)
        // 设置光照
      vm.amap.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5)
      vm.amap.DirectionLight = new AMap.Lights.DirectionLight([0, 0, 1], [1, 1, 1], 1)

      let object3Dlayer = new AMap.Object3DLayer()
      vm.amap.add(object3Dlayer)
      let overlayGroups = null
      vm.amap.on("complete", function(){
        // console.log("地图加载完成！")
        vm.isbkg = false

        map.setMapStyle('amap://styles/ed3949fcc58f08e9e8b692f949c6137d')


        let schoolnum = 0
        let colorList = ['#1890ffbb', '#00e2febb', '#ffea7fbb', '#81e6b3bb', '#4c6affbb', '#7e73ffbb', '#a694ffbb', '#ffb686bb', '#fb6c84bb', '#91dcf2bb', '#11c9aabb', '#40bfffbb']
        let height = 3000

        vm.getMapData('长沙市', 'city', object3Dlayer)

        })
      }) // 结束
    },
    getMapData (city, level, object3Dlayer) {
      let vm = this
      let colorList = ['#1890ffbb', '#00e2febb', '#ffea7fbb', '#81e6b3bb', '#4c6affbb', '#7e73ffbb', '#a694ffbb', '#ffb686bb', '#fb6c84bb', '#91dcf2bb', '#11c9aabb', '#40bfffbb']
      let height = 3000
      AMapLoader.load({
        'key': '4daa78d371fcbec403897e8ccc0c408c',   // 申请好的Web端开发者Key，首次调用 load 时必填
        'version': '1.4.15',   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        'plugins': ['Map3D','ElasticMarker','AMap.DistrictSearch','AMap.ControlBar','AMap.Heatmap'],  // 插件列表
        'AMapUI': {             // 是否加载 AMapUI，缺省不加载
          'version': '1.1',   // AMapUI 缺省 1.1
          'plugins':[],       // 需要加载的 AMapUI ui插件
        },
        'Loca':{                // 是否加载 Loca， 缺省不加载
          'version': '1.3.2'  // Loca 版本，缺省 1.3.2
        }
      }).then((AMap)=>{
        new AMap.DistrictSearch({
          subdistrict: 1,   // 返回下一级行政区
          extensions: 'all',  // 返回行政区边界坐标组等具体信息
          level: level  // 查询行政级别为 市
        }).search(city, function (status, result) {
          console.log('result', result)
          let resultdata = result
          let districtList = result.districtList[0]
          let center = districtList.center
          let itemlnglat = [center.lng, center.lat]
          vm.amap.setZoomAndCenter(9.8, itemlnglat)
          let layer = new Loca.ScatterPointLayer({
            map: vm.amap,
            zIndex: 2
          })

          // hhh
          let subDistrictList = vm.subDistrictList
          console.log('subDistrictList', subDistrictList)
          if (level === 'city') {
            vm.subDistrictList = districtList.districtList
            vm.subDistrictList.forEach((item, index) => {
              new AMap.DistrictSearch({
                subdistrict: 0,   // 返回下一级行政区
                extensions: 'all',  // 返回行政区边界坐标组等具体信息
                level: 'district'  // 查询行政级别为 市
              }).search(item.name, function (substatus, subresult) {
                let bounds = subresult.districtList[0].boundaries
                item.prism = new AMap.Object3D.Prism({
                  path: bounds,
                  height: height,
                  color: colorList[index]
                })
                item.prism.transparent = true

                object3Dlayer.add(item.prism)

                let text = new AMap.Text({
                  text: item.name,
                  verticalAlign: 'bottom',
                  position: [item.center.lng, item.center.lat],
                  height: height,
                  style: {
                    'background-color': 'transparent',
                    'text-align': 'center',
                    'border': 'none',
                    'color': 'white',
                    'font-size': '16px',
                    'font-weight': 600
                  }
                })

                text.setMap(vm.amap)

                text.on('click', (ev) => {
                  let aa = ev.target.getExtData()
                  // vm.curAreaId = aa.areaid
                  // vm.$emit('areaId', aa.areaid)
                  vm.subDistrictList.forEach(itm => {
                    object3Dlayer.remove(itm.prism)
                  })

                  // object3Dlayer.add(vm.allCityData[index].prism)
                  // map.setZoomAndCenter(11, aa.lnglat)
                  vm.getMapData(item.name , 'district', object3Dlayer)
                })



            //     let citys = [{
            //   'lnglat': [112.914425,28.246601], type:2
            //   }, {
            //   'lnglat': [113.132318,28.224706], type:3
            //   }, {
            //   'lnglat': [112.722403,28.242018], type:4
            //   }, {
            //   'lnglat': [112.928797,28.147273], type:5
            //   }, {
            //   'lnglat': [113.055854,28.118731], type:1
            //   }, {
            //   'lnglat': [113.243276,28.195166], type:2
            //   }, {
            //   'lnglat': [112.919024,28.059584], type:2
            //   }, {
            //   'lnglat': [112.7431,28.416005], type:2
            //   }]
            // layer.setData(citys, {
            //     lnglat: 'lnglat'
            //     // function (obj) {
            //     //     var value = obj.value;
            //     //     return [value['lng'], value['lat']];
            //     // },
            //     // type: 'csv'
            // });

            // layer.setOptions({
            //     unit: 'px',
            //     style: {
            //       // 根据车辆类型设定不同半径
            //       radius: function (obj) {
            //         var value = obj.value
            //         switch (parseInt(value.type)) {
            //           case 3:
            //             return 13
            //           case 4:
            //             return 31
            //           case 2:
            //             return 13
            //           case 5:
            //             return 31
            //           default:
            //             return 13
            //         }
            //       },
            //       height: 4000,
            //       // 根据车辆类型设定不同填充颜色
            //       color: function (obj) {
            //         var value = obj.value
            //         switch (parseInt(value.type)) {
            //           case 3:
            //             return 'red'
            //           case 4:
            //             return 'red'
            //           case 2:
            //             return 'red'
            //           case 5:
            //             return 'red'
            //           default:
            //             return 'red'
            //         }
            //       },
            //       opacity: 1
            //     }
            // })

            // layer.render()


              })
            })
          } else {
            let prism = null
            vm.subDistrictList.forEach(itm => {
              if (itm.name === city) {
                prism = itm.prism
              }
              object3Dlayer.remove(itm.prism)
            })

            object3Dlayer.add(prism)

          }
        })
      })
    },
    handleTouchMove () {}
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 100%;
}
.amap-marker-label{
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  height: 36px;
  color: "#fff";
  border-radius: 15px;
  background-color: rgba(255,255,255,0.4);
  border: solid 2px rgba(100,255,200,0.8);
}
.mapbkg {
  /* background: rgba(0, 17, 64, 1); */
  background: #031532;
}
.mapclass {
  width: 1920px;
  height: 1080px;
  top: -190px;
  left: -20px;
}
.mapbutton {
  position:absolute;
  font-size: 16px;
  margin: 10px;
  z-index: 1;
  padding: 5px 10px;
  border: 2px solid #0469f1;
  border-radius: 5px;
  color: #00a7fe;
  cursor: pointer;
}
.mapbutton:hover {
  color: #07ffff;
}
</style>
